<html>
    <head>
        <title>选项合并</title>
    </head>
    <script>
        // 二、选项合并
                            /*
                                当组件和混入对象含有同名选项时，这些选项将一恰当的方式进行"合并"
                            */
                        
                           //  比如，数据对象在内部进行递归合并，并在发生冲突时一---组件数据优先。
                            var mixin ={
                                            data:function(){
                                                return {
                                                    message:'hello',//这里会与组件data对象的message属性冲突，组件的优先。
                                                    foo:'abc'
                                                }
                                            }
                                       }

                                       new Vue({
                                            mixins:[mixin],
                                            data:function(){
                                                return{
                                                    message:'goodbye',
                                                    bar:'def'
                                                }
                                            },
                                            created:function(){
                                                console.log(this.$data)
                                                // ==> {message:"goodbye",foo:"abc",bar:"def"}
                                            }
                                       });

                            // 同名的钩子函数将合并为一个“数组”，因此都将被调用。（另外，混入对象的钩子将"先调用"，再调用组件的钩子）
                                       var mixin={
                                            created:function(){
                                                console.log('混入对象的created钩子被调用');
                                            }
                                       };

                                       new Vue({
                                            mixings:[mixin],
                                            created:function(){
                                                console.log('组件created钩子被调用');
                                            }
                                       });
                                       // ===> '混入对象的created钩子被调用'
                                       // ===> '组件的created钩子被调用'


                            // 值为对象的选项，例如 methods、components 和 directives 将被合并为同一个对象。(两个对象键名冲突时，取组件对象的键值对)。
                                       var mixin={
                                            methods:{
                                                foo:function(){
                                                    console.log('foo')
                                                },
                                                conflicting:function(){
                                                    console.log('from mixin')
                                                }
                                            }
                                       }

                                       var vm = new Vue({
                                            mixins:[mixin],
                                            methods:{
                                                bar:function(){
                                                    console.log('bar')
                                                },
                                                conflicting:function(){
                                                    console.log('from self')
                                                }
                                            }
                                       })

                                       vm.foo() // ==> "foo"    来自混入对象，实例没有此method
                                       vm.conflicting() // ==> "from self"  混入对象与实例的conflictiong方法冲突，实例的conflicting方法优先级高
                                       vm.bar() // ==> "bar"

                            /*
                                注意:  
                                       Vue.extend() 也是用同样的策略进行合并。
                            */ 
    </script>
</html>